<template>
  <div :style="{
    height: cardHeight,
    width: asideShow ? cardWidth : '0px',
    position: 'relative',
  }">
    <div
      class="aside-parent"
      v-show="asideShow"
      :style="{
        width: asideShow ? cardWidth : '0px',
        transition: 'width 0.5s'
      }"
    >
      <div class="aside_title">
        <div class="left">
          <img src="./assets/appinformation.png" />
          <span>模拟列表</span>
          <span>(9)</span>
        </div>
        <div class="right">
          <el-button
            icon="el-icon-plus"
            circle
            size="mini"
          ></el-button>
        </div>
      </div>
      <div style="padding: 0 16px;box-sizing: border-box;">
        <el-input
          placeholder="请输入内容"
          suffix-icon="el-icon-search"
          v-model="search"
          size="small"
        >
        </el-input>
      </div>
      <div class="asideMain">
        <div
          v-for="(item,index) in tableData"
          :key="index"
          :class="tabIndex === index ? 'active':''"
          @click="getTabItem(item,index)"
          @mouseover="handleMouseOver(index)"
          @mouseout="handleMouseOut(index)"
        >
          <i class="el-icon-s-operation"></i>
          <div class="asideMain__title">
            {{item.label}}
          </div>
          <i
            v-if="deleteShow || tabIndex === index || mouseShow === index"
            class="el-icon-delete"
          ></i>
        </div>
      </div>
    </div>
    <div
      class="switch"
      @click="getAsideSwitch"
    >
      <img :src="asideShow ? require('./assets/打开.png') : require('./assets/折叠.png')" />
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    cardHeight: {
      type: String,
      default: () => {
        return ''
      }
    },
    cardWidth: {
      type: String,
      default: () => {
        return ''
      }
    },
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  watch: {
  },
  data () {
    return {
      asideShow: true,
      search: '',
      deleteShow: false,
      tabIndex: 0,
      mouseShow: null
    }
  },
  computed: {},
  watch: {},
  created () { },
  mounted () {

  },
  methods: {
    getAsideSwitch () {
      this.asideShow = !this.asideShow
    },
    getTabItem (item, index) {
      this.tabIndex = index
    },
    handleMouseOver (index) {
      this.mouseShow = index
    },
    handleMouseOut (index) {
      this.mouseShow = null
    }
  },
}
</script>
<style lang='less' scoped>
.aside-parent {
  background: #fff;
  height: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  .aside_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    box-sizing: border-box;
    .left {
      display: flex;
      align-items: center;
      img {
        width: 18px;
        margin-right: 10px;
      }
    }
  }
  .asideMain {
    height: calc(100% - 86px);
    width: 100%;
    padding: 10px 0;
    box-sizing: border-box;
    overflow-y: auto;
    > div {
      width: 100%;
      height: 50px;
      padding: 6px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: left;
      border-bottom: #ebf2f8 1px solid;
      border-left: solid 3px #4587f100;
      cursor: pointer;
      .el-icon-s-operation {
        font-size: 20px;
        color: #cad1d8;
        margin-right: 10px;
      }
      .asideMain__title {
        width: 70%;
      }
      .el-icon-delete {
        color: #969b9f;
      }
    }
  }
}
/deep/.el-button--mini.is-circle {
  padding: 4px;
}
.switch {
  position: absolute;
  right: -13px;
  top: calc(50% - 45px);
  cursor: pointer;
  img {
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.1));
  }
}
.active {
  background: #eef4fd;
  border-left: solid 3px #4588f1 !important;
  .asideMain__title {
    color: #609bfe;
  }
}
.asideMain > div:hover {
  background: #eef4fd;
  border-left: solid 3px #4588f1 !important;
  .asideMain__title {
    color: #609bfe;
  }
}
</style>
